<!DOCTYPE html>
<html>
<body>
<p>请输入两个数字</p>
<form action="/add/" method="get">
    a: <input type="text" id="a" name="a"> <br>
    b: <input type="text" id="b" name="b"> <br>
    <p>result: <span id='result'></span></p>
    <button type="button" id='sum'>提交</button>
</form>


<div id="dict">Ajax 加载字典</div>
<p id="dict_result"></p>

<div id="list">Ajax 加载列表</div>
<p id="list_result"></p>

<!--
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      // 求和 a + b
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();

        $.get("/add/",{'a':a,'b':b}, function(ret){
            $('#result').html(ret);
        })
      });

      // 列表 list
      $('#list').click(function(){
          $.getJSON('/ajax_list/',function(ret){
            //返回值 ret 在这里是一个列表
            for (var i = ret.length - 1; i >= 0; i--) {
              // 把 ret 的每一项显示在网页上
              $('#list_result').append(' ' + ret[i])
            };
          })
      })

      // 字典 dict
      $('#dict').click(function(){
          $.getJSON('/ajax_dict/',function(ret){
              //返回值 ret 在这里是一个字典
              $('#dict_result').append(ret.twz + '<br>' + ret['zqxt'] + '<br>');
              // 也可以用 ret['twz']
          })
      })
    });
</script>
-->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
      // 求和 a + b
      $("#sum").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
 
        $.get("{% url 'add' %}",{'a':a,'b':b}, function(ret){
            $('#result').html(ret);
        })
      });
 
      // 列表 list
      $('#list').click(function(){
      //这样做最大的好处就是在修改 urls.py 中的网址后，不用改模板中对应的网址。
          $.getJSON("{% url 'ajax-list' %}",function(ret){
            //返回值 ret 在这里是一个列表
            for (var i = ret.length - 1; i >= 0; i--) {
              // 把 ret 的每一项显示在网页上
              $('#list_result').append(' ' + ret[i])
            };
          })
      })
 
      // 字典 dict
      $('#dict').click(function(){
          $.getJSON("{% url 'ajax-dict' %}",function(ret){
              //返回值 ret 在这里是一个字典
              $('#dict_result').append(ret.twz + '<br>' + ret['zqxt'] + '<br>');
              // 也可以用 ret['twz']
          })
      })
    });
</script>

</body>
</html>

